<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/WorkspaceTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="top">

    </ui:define>

    <ui:define name="left">

    </ui:define>

    <ui:define name="right">

    </ui:define>

    <ui:define name="content">
        <style>
            .ui-datatable table {
                border-collapse: collapse;
                width: 100%;
                border-color: grey;
            }
            .ui-datatable .ui-datatable-header, .ui-datatable .ui-datatable-footer {
                text-align: center;
                padding: 4px 10px 4px 160px;
            }
            .ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
                width: 60px;
            }
        </style>
        <p:panel header="Original Forecast">
            <h:form id="oriForm">
                <p:fieldset legend="Basic Info">
                    <h:panelGrid columns="4">
                        <h:outputLabel style="font-weight: bold" value="Sales Forecast Id: "/>
                        <h:outputText value="#{sfMgmtManagerBean.selectedSF.sfIdStr}"/>
                        <h:outputText value=""/>
                        <h:outputText value=""/>

                        <h:outputLabel style="font-weight: bold" value="Sales Forecast Period: "/>
                        <h:outputText value="#{sfMgmtManagerBean.selectedSF.getForecastedPeriod()}"/>
                        <h:outputText value=""/>
                        <h:outputText value=""/>

                        <h:outputLabel style="font-weight: bold" value="Staff in Charge"/>
                        <h:outputText value="#{sfMgmtManagerBean.selectedSF.staff.fullName}"/>
                        <h:outputText value=""/>
                        <h:outputText value=""/>
                    </h:panelGrid>
                </p:fieldset>
            </h:form>
        </p:panel>
        <br/>
        <br/>
        <p:panel header="Updated Versions">
            <h:form id="updatedForm">
                <p:dataTable value="#{sfMgmtManagerBean.updatedTimes}" var="counter">
                    <p:column headerText="No.">
                        <h:outputText value="#{sfMgmtManagerBean.returnUpdatedOrOrigTitle(counter)}"/>
                    </p:column>

                    <p:column headerText="Updated Time">
                        <h:outputText value="#{sfMgmtManagerBean.returnUpdatedTime(counter)}"/>
                    </p:column>

                    <p:column headerText="Options">
                        <p:commandButton ajax="true" action="#{sfMgmtManagerBean.selectUpdatedVersionId(counter)}"
                                         image="ui-icon ui-icon-search" update="upForm" onsuccess="updateVerDlg.show()"/>
                    </p:column>
                </p:dataTable>
            </h:form>
        </p:panel>
        <p:dialog widgetVar="updateVerDlg" id="updateVerDialog" hideEffect="explode" showEffect="explode" width="720" header="Sales Forecast">
            <h:form id="upForm">
                <c:forEach items="#{sfMgmtManagerBean.counterForProduct}" var="count">
                    <div style="border:1px solid gray;width:700px;overflow-y:hidden;overflow-x:scroll;">
                        <div class="ui-datatable ui-widget">
                            <table border="1" summary="for product a">
                                <caption>
                                    <div class="ui-datatable-header ui-widget-header ui-corner-tl ui-corner-tr">
                                        Sales Forecast for Product <h:outputText value="#{sfMgmtManagerBean.returnProductName(count)}"/>
                                    </div>
                                </caption>

                                <thead>
                                    <tr>
                                        <th class="ui-state-default" rowspan="2"></th>
                                        <th class="ui-state-default" colspan="6">Month</th>
                                    </tr>

                                    <tr>
                                        <c:forEach items="#{sfMgmtManagerBean.labels}" var="lab">
                                            <th class="ui-state-default"><h:outputText value="#{lab}"/></th>
                                        </c:forEach>
                                    </tr>
                                </thead>

                                <tbody class="ui-datatable-data">
                                    <tr>
                                        <th class="ui-state-default" >Base Projection</th>
                                        <c:forEach items="#{sfMgmtManagerBean.returnSelectedBaseProjection(count)}" var="item">
                                            <td><h:outputText value="#{item}"/></td>
                                        </c:forEach>
                                    </tr>

                                    <tr>
                                        <th class="ui-state-default" >Promotion</th>
                                        <c:forEach items="#{sfMgmtManagerBean.returnSelectedPromotion(count)}" var="item">
                                            <td><h:outputText value="#{item}"/></td>
                                        </c:forEach>
                                    </tr>

                                    <tr>
                                        <th class="ui-state-default" >Manual Adjustment</th>
                                        <c:forEach items="#{sfMgmtManagerBean.returnSelectedHumanAdj(count)}" var="item">
                                            <td><h:outputText value="#{item}"/></td>
                                        </c:forEach>
                                    </tr>

                                    <tr>
                                        <th class="ui-state-default" >Final</th>
                                        <c:forEach items="#{sfMgmtManagerBean.returnSelectedFinal(count)}" var="item">
                                            <td><h:outputText value="#{item}"/></td>
                                        </c:forEach>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <br/>
                    <br/>
                </c:forEach>
                <p:commandButton value="OK" onclick="updateVerDlg.hide()"/>
            </h:form>
        </p:dialog>
    </ui:define>

    <ui:define name="bottom">

    </ui:define>

</ui:composition>
